<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta charset="UTF-8">
    <title>Cola-UI 客户端框架</title>
    <link rel="stylesheet" type="text/css" href="./resources/nprogress/nprogress.css">
    <script src="./resources/nprogress/nprogress.js"></script>
    <link rel="stylesheet" type="text/css" href="./resources/cola-ui/semantic.css">
    <link rel="stylesheet" type="text/css" href="./resources/cola-ui/cola.css">
    <link rel="stylesheet" type="text/css" href="./css/common.css">
    <link rel="stylesheet" type="text/css" href="./frame/main.css">
  </head>
  <body>
    <script type="text/javascript">
      NProgress.configure({showSpinner: false, minimum: 0.3})
      NProgress.start();
    </script>
    <div class="v-box">
      <div class="box ui menu secondary attached page-header">
        <div class="item logo header"><img src="./images/logo.png" class="ui mini image"><span>Cola-UI Client Framework</span></div>
        <div class="right menu"><a class="item msg icon mail"><i class="icon mail"></i><span class="badge">5</span></a><a class="item msg icon"><i class="icon alarm icon-animated-bell"></i><span class="badge">22</span></a><a c-onclick="showUserSidebar()" class="item icon user"><img src="./images/avatars/alex.png" class="ui image avatar"><i class="icon dropdown"></i></a></div>
      </div>
      <div class="flex-box">
        <div class="h-box">
          <div id="frameworkSidebarBox" class="box main-menu ui segment inverted basic vertical">
            <div class="side-accordion">
              <div c-onclick="toggleSidebar()" class="bar"><i class="iconfont icon-sidebar"></i></div>
              <div id="frameworkSidebar" class="ui accordion">
                <div c-repeat="menu in menus" class="item active">
                  <div class="title menu-item"><i c-class="menu.icon"></i><span c-bind="menu.label"></span><i c-display="dropdownIconVisible(menu)" class="icon angle left dropdown-icon"></i></div>
                  <div class="content">
                    <div c-repeat="item in menu.menus" c-onclick="menuItemClick(item)" class="menu-item"><i c-class="item.icon"></i><span c-bind="item.label"></span><i c-display="dropdownIconVisible(item)" class="icon angle left dropdown-icon"></i></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-box">
            <div id="rightContainer">
              <div class="layer-dimmer"></div>
              <div id="subMenuLayer" c-widget="Layer; animation:slide right">
                <div class="title"><span c-bind="currentMenu.label"></span></div>
                <div id="subMenuTree">
                  <template name="node-default">
                    <div><i c-classname="menu.hasChild ? 'icon folder outline' : 'icon file'"></i><span c-bind="menu.label"></span></div>
                  </template>
                </div>
                <div id="subMenuNavbar" c-onclick="hideSubMenuLayer()">
                  <div><i class="iconfont icon-weibiaoti26"></i></div>
                </div>
              </div>
              <div id="viewTab" c-widget="Tab; height:100%">
                <nav class="tab-bar">
                  <ul class="tabs"></ul>
                </nav>
                <ul class="contents"></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="userSidebar" c-widget="Sidebar; modalOpacity:0; direction:right">
      <div class="v-box">
        <div class="box">
          <div class="ui segment text-center basic inverted basic-info">
            <div class="avatar"><img c-src="user.avatar" class="ui image tiny avatar centered"></div>
            <div c-bind="user.name" class="name"></div>
          </div>
        </div>
        <div class="flex-box">
          <div>
            <div class="ui segment text-center basic"><a class="msg"><i class="icon mail"></i><span>消息</span><span c-bind="messages.message+'条'" class="detail"></span></a><a class="msg"><i class="icon alarm"></i><span>任务</span><span c-bind="messages.task+'条'" class="detail"></span></a></div>
          </div>
        </div>
        <div class="box text-center">
          <div c-widget="Button; caption:安全退出; click:logout" class="sign-out-btn teal basic"><i class="icon sign out"></i></div>
        </div>
      </div>
    </div>
    <div id="loginDialog">
      <div id="containerSignIn" c-widget="segment;" class="ui segment">
        <div id="formSignIn" c-widget="form" class="ui form">
          <h2>用户登录</h2>
          <div class="field">
            <div c-widget="input; placeholder:用户名; postOnInput:true; bind:login.userName" class="large"></div>
          </div>
          <div class="field">
            <div c-widget="input; placeholder:密码;inputType:password; postOnInput:true; bind:login.password" class="large"></div>
          </div>
          <div style="min-height: 1em;" class="field"><a href="./frame/account/forgot-password" class="float-right">找回密码</a></div>
          <div class="field">
            <div c-widget="Button; caption:登录; click:signIn" tabindex="0" class="large fluid circular submit-btn"></div>
          </div>
          <div class="field">
            <div class="ui message error"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./resources/jquery/jquery-2.1.3.js"></script>
  <script src="./resources/jquery/jquery.cookie.min.js"></script>
  <script src="./resources/cola-ui/3rd.js"></script>
  <script src="./resources/cola-ui/semantic.js"></script>
  <script src="./resources/cola-ui/cola.js" charset="UTF-8"></script>
  <script src="./js/common.js"></script>
  <script src="./frame/main.js"></script>
</html>